<template>
  <div class="login">
    <maynav title="登录" :leftArrow="leftArrow"></maynav>
    <div class="content">
      <van-form ref="form">
        <van-field
          left-icon="phone-o"
          v-model="form.mobile"
          :rules="rules.mobile"
          placeholder="请输入手机号码"
        />
        <van-field
          v-model="form.code"
          left-icon="bag-o"
          :rules="rules.code"
          clearable
          placeholder="请输入验证码"
        >
          <template #button>
            <span class="line"></span>
            <van-button size="small" round color="#ededed"
              >发送验证码</van-button
            >
          </template>
        </van-field>
        <van-button block color="#6db4fb" class="btn" @click="sumbit"
          >登录</van-button
        >
      </van-form>
    </div>
  </div>
</template>

<script>
// 引入请求api
import { authorizations, userProfile } from '@/api/login.js'
// 设置token
import { setLocal, getLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      leftArrow: false, // 标题不需要箭头
      form: {
        mobile: '13999999999', // 手机号
        code: '246810' // 验证码
      },
      rules: {
        // 规则
        mobile: [
          { required: true, message: '请输入手机号' },
          {
            validator: value => {
              // value:当前值
              //  rule:验证规则
              return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              )
              // true:验证通过
              // false:验证失败
            },
            message: '请输入正确手机号'
          }
        ],
        code: [{ required: true, message: '请输入验证码' }]
      }
    }
  },
  created () {
    // 看是否有token
    if (getLocal('token')) {
      this.$router.push('/home')
    }
  },
  methods: {
    sumbit () {
      this.$refs.form.validate().then(() => {
        // 用户登录接口
        authorizations(this.form).then(res => {
          setLocal('token', res.data.token)
          // console.log(res)
          //  获取用户信息
          userProfile().then(res => {
            // 数据保存到vuex中
            this.$store.commit('setUserInfo', res.data)
            // 改变状态
            this.$store.commit('setIsLogin', true)
            // 调转到登录页面
            this.$router.push('/home')
          })
        })
      })
    }
  },
  mounted () {
    document.body.style.backgroundColor = '#f5f7f9'
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#ffffff'
  }
}
</script>

<style scoped lang="less">
.login {
  .content {
    padding: @p15;
    .van-field {
      padding-left: 0;
      ::v-deep .van-button__text {
        color: #919191;
      }
    }
    ::v-deep .van-cell::after {
      width: 100%;
      right: 0;
      left: 0;
    }
    ::v-deep .van-field__left-icon {
      margin-right: @p15;
    }
    .line {
      // display: inline-block;
      width: 10px;
      height: 100%;
      border-left: 1px solid #eeeeee;
      margin-right: 10px;
    }
    .btn {
      margin-top: 26px;
      border-radius: 5px;
      color: #fff;
    }
  }
}
</style>
